<template>
  <div>
    <div class="search">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入小区或地址"
        background="#21b97a"
      >
        <template #label>
          <div @click="$router.push('/city')">{{ city }} ▼</div>
        </template>
        <template #left>
          <van-icon name="arrow-left" size="24" color="#fff" @click="back" />
        </template>
        <template #action>
          <div @click="$router.push('/map')">
            <van-icon name="location-o" size="25px" color="white" />
          </div>
        </template>
      </van-search>
    </div>
    <div class="dropdownmenu">
      <van-sticky>
        <van-dropdown-menu active-color="#21b97a">
          <van-dropdown-item title="区域" ref="dropdown">
            <van-picker
              show-toolbar
              :columns="columns2"
              toolbar-position="bottom"
              @change="onChange"
              @confirm="$refs.dropdown.toggle()"
              @cancel="$refs.dropdown.toggle()"
            />
          </van-dropdown-item>
          <van-dropdown-item title="方式" ref="dropdown1">
            <van-picker
              toolbar-position="bottom"
              show-toolbar
              :columns="rentType"
              @confirm="getValues"
              @cancel="$refs.dropdown1.toggle()"
            />
          </van-dropdown-item>
          <van-dropdown-item title="租金" ref="dropdown2">
            <van-picker
              toolbar-position="bottom"
              show-toolbar
              :columns="price"
              @confirm="$refs.dropdown2.toggle()"
              @cancel="$refs.dropdown2.toggle()"
            />
          </van-dropdown-item>
          <van-dropdown-item title="筛选" @open="show = true">
            <van-popup
              v-model="show"
              position="right"
              :style="{ height: '100%', width: '80%' }"
              get-container="body"
              style="overflow: hidden; overflow: auto"
            >
              <div class="huxing">
                <h4>户型</h4>
                <div class="huxing-buttom">
                  <van-button
                    type="default"
                    v-for="item in roomType"
                    :key="item.value"
                    >{{ item }}</van-button
                  >
                </div>
              </div>
              <div class="chaoxiang">
                <h4>朝向</h4>
                <div class="chaoxiang-buttom">
                  <van-button
                    type="default"
                    v-for="item in oriented"
                    :key="item.value"
                    >{{ item }}</van-button
                  >
                </div>
              </div>
              <div class="loucheng">
                <h4>楼层</h4>
                <div class="loucheng-buttom">
                  <van-button
                    type="default"
                    v-for="item in floor"
                    :key="item.value"
                    >{{ item }}</van-button
                  >
                </div>
              </div>
              <div class="liangdian">
                <h4>房屋亮点</h4>
                <div class="liangdian-buttom">
                  <van-button
                    type="default"
                    v-for="item in characteristic"
                    :key="item.value"
                    >{{ item }}</van-button
                  >
                </div>
              </div>
            </van-popup>
          </van-dropdown-item>
        </van-dropdown-menu>
      </van-sticky>
    </div>
    <div
      class="bottom-button"
      v-if="show"
      style="position: fixed; bottom: 0; right: 0; z-index: 9999999999"
    >
      <van-button plain type="primary" class="button-left" @click="show = false"
        >清除</van-button
      >
      <van-button type="primary" class="button-right" @click="show = false"
        >确认</van-button
      >
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="mian-house">
        <div
          class="mian-item"
          v-for="(item, index) in houses"
          :key="index"
          @click="$router.push(`/house/${item.houseCode}`)"
        >
          <div class="item-left"><img :src="url + item.houseImg" alt="" /></div>
          <div class="item-right">
            <div class="item-right-h3 sin-line">{{ item.title }}</div>
            <div class="item-right-span">{{ item.desc }}</div>
            <p>{{ item.tags[0] }}</p>
            <h2>{{ item.price }} <span>元/月</span></h2>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { getCity } from '@/utils/storage'
import { area, gethouses, subway } from '@/api/look-house'

// const cities = {
//   浙江: [],
//   福建: []
// }
export default {
  // name: '',
  components: {},
  props: {},
  data() {
    return {
      finished: false,
      loading: false,
      value: '',
      show: false,
      city: getCity().label || '北京',
      columns2: [{ values: ['区域', '地铁'] }, { values: [] }, { values: [] }],
      res: [],
      houses: [],
      url: 'http://liufusong.top:8080',
      gethouses: { cityId: getCity().value, start: 1, end: 20 },
      characteristic: [],
      floor: [],
      oriented: [],
      price: [],
      rentType: [],
      roomType: [],
      obj: {}
    }
  },
  computed: {},
  watch: {},
  async created() {
    const res = await area({ id: getCity().value })
    // console.log(res.data.body)
    this.res = [...res.data.body]
    this.columns2[1].values = [
      '不限',
      ...res.data.body.map((item) => item.label)
    ]
    const res1 = await subway({ id: getCity().value })
    this.obj = res1.data.body
    this.characteristic = [
      ...res1.data.body.characteristic.map((item) => item.label)
    ]
    this.floor = [...res1.data.body.floor.map((item) => item.label)]
    this.oriented = [...res1.data.body.oriented.map((item) => item.label)]
    this.price = [...res1.data.body.price.map((item) => item.label)]
    this.rentType = [...res1.data.body.rentType.map((item) => item.label)]
    this.roomType = [...res1.data.body.roomType.map((item) => item.label)]
    // const { data } = await gethouses(this.gethouses)
    // // console.log(data.body.list)
    // this.houses = data.body.list
  },
  methods: {
    back() {
      this.$router.go(-1)
    },
    async onChange(picker, values) {
      // console.log(picker, values)
      // console.log(values[1])
      if (values[0] === '区域') {
        // this.columns2[2].values = []
        const res = await area({ id: getCity().value })
        // console.log(res.data.body)
        this.res = [...res.data.body]
        this.columns2[1].values = [
          '不限',
          ...res.data.body.map((item) => item.label)
        ]

        // const { data } = await gethouses(this.gethouses)
        // // console.log(data.body.list)
        // this.houses = data.body.list
        const value = this.res.find((item) => item.label === values[1]).value
        if (value) {
          const res2 = await area({ id: value })
          // console.log(res.data.body)
          this.columns2[2].values = [
            '不限',
            ...res2.data.body.map((item) => item.label)
          ]
        }
      } else {
        // this.columns2[2].values = []
        const res = await subway({ id: getCity().value })
        const ress = res.data.body.subway.children
        this.columns2[1].values = [...ress.map((item) => item.label)]
        if (
          ress.find((item) => item.label === values[1]).children !== undefined
        ) {
          this.columns2[2].values = [
            ...ress
              .find((item) => item.label === values[1])
              .children.map((item) => item.label)
          ]
        }

        // console.log(res.data.body)
      }
      // picker.setColumnValues(1, cities[values[0]])
    },
    async onLoad() {
      const { data } = await gethouses(this.gethouses)
      // console.log(data.body.list)
      this.houses = data.body.list
      this.loading = false
      if (data.body.list.length < this.gethouses.end) {
        this.finished = true
      }
      this.gethouses.end += 20
    },
    getValues(value) {
      console.log(value)
      // console.log(this.$refs.dropdown1.getValues())
      this.$refs.dropdown1.toggle()
    }
  }
}
</script>

<style lang="less" scoped>
.van-search__content {
  margin-left: 16px;
}
.van-search__content {
  padding-left: 8px;
}
::v-deep .van-picker__cancel {
  width: 150px;
  border: 1px solid #e9e9e9;
  color: #21b97a;
}
::v-deep .van-picker__confirm {
  width: 225px;
  background-color: #21b97a;
  color: white;
}
.mian-house {
  padding: 0 10px;
  padding-top: 18px;
  .mian-item {
    display: flex;
    height: 100px;
    // background-color: pink;
    .item-left {
      width: 106px;
      height: 80px;
      // background-color: red;
      margin-right: 12px !important;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.item-right {
  display: flex;
  flex-direction: column;
  .item-right-h3 {
    font-size: 15px !important;
    color: #394043;
    width: 150px;
  }
  .item-right-span {
    font-size: 12px;
    color: #afb2b3;
    margin: 4px 0;
  }
  p {
    font-size: 12px !important;
    color: #39becd;
    text-align: center;
    border-radius: 6px;
    line-height: 20px;
    background-color: #e8f3f4;
    width: 46px;
    height: 20px;
    margin: 4px 0;
    overflow: hidden;
  }
  h2 {
    line-height: 16px !important;
    font-size: 16px !important;
    color: #fa5741;
    span {
      font-size: 12px;
      color: #fa5741;
    }
  }
}
.huxing,
.chaoxiang,
.loucheng,
.liangdian {
  h4 {
    font-size: 15px;
    color: #333333;
    margin: 20px 0;
  }
  .huxing-buttom,
  .chaoxiang-buttom,
  .loucheng-buttom,
  .liangdian-buttom {
    border-bottom: 1px solid #e5e5e5;
    margin: 0 0 0 40px;
    padding-bottom: 14px;
    .van-button {
      width: 70px;
      height: 32px;
      font-size: 12px;
      color: #888888;
      margin: 0 18px 15px 0;
      padding: 0;
    }
  }
  padding: 20px;
}
.bottom-button {
  transition: all 1s;
  .button-left {
    // display: inline-block !important;
    width: 100px !important;
    height: 50px !important;
  }
  .button-right {
    // display: inline-block !important;
    width: 200px !important;
    height: 50px !important;
  }
}
.liangdian {
  margin-bottom: 70px;
}
// .mian-house {
//   margin-bottom: 70px;
// }
</style>
